<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录 - XunAI 聊天系统</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css" rel="stylesheet">
  <style>
    :root {
      --primary-color: #8b5cf6;
      --primary-light: #a78bfa;
      --primary-dark: #7c3aed;
      --primary-bg: #f5f3ff;
      --primary-border: #ddd6fe;
    }

    body {
      background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      margin: 0;
      padding: 20px;
      transition: background 0.3s ease;
    }

    .login-container {
      background: white;
      border-radius: 16px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
      padding: 2.5rem;
      width: 100%;
      max-width: 420px;
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
    }

    .login-container::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    }

    .login-header {
      text-align: center;
      margin-bottom: 2rem;
      position: relative;
    }

    .theme-toggle {
      position: absolute;
      top: 0;
      right: 0;
      background: var(--primary-bg);
      border: none;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      color: var(--primary-color);
    }

    .theme-toggle:hover {
      background: var(--primary-color);
      color: white;
      transform: rotate(15deg);
    }

    .login-logo {
      font-size: 2.5rem;
      color: var(--primary-color);
      margin-bottom: 0.5rem;
    }

    .login-title {
      font-weight: 700;
      color: #1f2937;
      margin-bottom: 0.5rem;
    }

    .login-subtitle {
      color: #6b7280;
      font-size: 0.95rem;
    }

    .login-tabs {
      display: flex;
      margin-bottom: 1.5rem;
      background: var(--primary-bg);
      border-radius: 12px;
      padding: 4px;
    }

    .login-tab {
      flex: 1;
      text-align: center;
      padding: 0.75rem;
      cursor: pointer;
      border-radius: 8px;
      transition: all 0.3s ease;
      font-weight: 500;
      color: #6b7280;
    }

    .login-tab.active {
      background: white;
      color: var(--primary-color);
      box-shadow: 0 2px 8px rgba(139, 92, 246, 0.2);
    }

    .login-form {
      display: none;
    }

    .login-form.active {
      display: block;
      animation: fadeIn 0.3s ease;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .form-control {
      border-radius: 8px;
      padding: 0.75rem 1rem;
      border: 1px solid #e5e7eb;
      transition: all 0.2s ease;
    }

    .form-control:focus {
      border-color: var(--primary-color);
      box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
    }

    .form-label {
      font-weight: 500;
      color: #374151;
      margin-bottom: 0.5rem;
    }

    .btn-primary {
      background-color: var(--primary-color);
      border-color: var(--primary-color);
      border-radius: 8px;
      padding: 0.75rem;
      font-weight: 500;
      transition: all 0.2s ease;
    }

    .btn-primary:hover {
      background-color: var(--primary-dark);
      border-color: var(--primary-dark);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
    }

    .btn-warning {
      background-color: #f59e0b;
      border-color: #f59e0b;
      border-radius: 8px;
      padding: 0.75rem;
      font-weight: 500;
      transition: all 0.2s ease;
    }

    .btn-warning:hover {
      background-color: #d97706;
      border-color: #d97706;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
    }

    .register-link {
      text-align: center;
      margin-top: 1.5rem;
      padding-top: 1.5rem;
      border-top: 1px solid #e5e7eb;
    }

    .register-link a {
      color: var(--primary-color);
      text-decoration: none;
      font-weight: 500;
      transition: color 0.2s ease;
    }

    .register-link a:hover {
      color: var(--primary-dark);
    }

    .admin-note {
      text-align: center;
      margin-top: 1rem;
      font-size: 0.8rem;
      color: #9ca3af;
    }

    .alert-container {
      margin-bottom: 1.5rem;
    }

    .alert {
      border-radius: 8px;
      border: none;
      padding: 0.75rem 1rem;
    }

    .alert-danger {
      background-color: #fef2f2;
      color: #dc2626;
      border-left: 4px solid #dc2626;
    }

    .alert-success {
      background-color: #f0fdf4;
      color: #16a34a;
      border-left: 4px solid #16a34a;
    }

    /* 深色主题支持 */
    body.dark-theme {
      background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    }

    body.dark-theme .login-container {
      background: #2d2d2d;
      color: #e9ecef;
    }

    body.dark-theme .login-title {
      color: #f9fafb;
    }

    body.dark-theme .login-subtitle {
      color: #a0a0a0;
    }

    body.dark-theme .login-tabs {
      background: #374151;
    }

    body.dark-theme .login-tab {
      color: #a0a0a0;
    }

    body.dark-theme .login-tab.active {
      background: #1a1a1a;
      color: var(--primary-light);
    }

    body.dark-theme .form-control {
      background-color: #1a1a1a;
      border-color: #404040;
      color: #e9ecef;
    }

    body.dark-theme .form-control:focus {
      background-color: #1a1a1a;
      border-color: var(--primary-color);
      color: #e9ecef;
    }

    body.dark-theme .form-label {
      color: #e9ecef;
    }

    body.dark-theme .register-link {
      border-top-color: #404040;
    }

    body.dark-theme .admin-note {
      color: #6b7280;
    }

    body.dark-theme .alert-danger {
      background-color: #7f1d1d;
      color: #fca5a5;
    }

    body.dark-theme .alert-success {
      background-color: #064e3b;
      color: #6ee7b7;
    }

    body.dark-theme .theme-toggle {
      background: #374151;
      color: var(--primary-light);
    }

    body.dark-theme .theme-toggle:hover {
      background: var(--primary-color);
      color: white;
    }

    /* 响应式设计 */
    @media (max-width: 480px) {
      .login-container {
        padding: 1.5rem;
      }

      .login-logo {
        font-size: 2rem;
      }

      .theme-toggle {
        width: 36px;
        height: 36px;
      }
    }
  </style>
</head>
<body>
<div class="login-container">
  <div class="login-header">
    <!-- 主题切换按钮 -->
    <button class="theme-toggle" id="themeToggle" title="切换主题">
      <i class="bi bi-sun" id="themeIcon"></i>
    </button>

    <div class="login-logo">
      <i class="bi bi-robot"></i>
    </div>
    <h1 class="login-title">XunAI 聊天系统</h1>
    <p class="login-subtitle">欢迎回来，请登录您的账户</p>
  </div>

  <!-- 消息提示区域 -->
  <div class="alert-container">
    <!-- 错误提示 -->
    <div th:if="${error != null and !#strings.isEmpty(error)}" class="alert alert-danger alert-dismissible fade show" role="alert">
      <i class="bi bi-exclamation-triangle me-2"></i>
      <span th:text="${error}"></span>
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>

    <!-- 成功提示 -->
    <div th:if="${success != null and !#strings.isEmpty(success)}" class="alert alert-success alert-dismissible fade show" role="alert">
      <i class="bi bi-check-circle me-2"></i>
      <span th:text="${success}"></span>
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
  </div>

  <!-- 登录选项卡 -->
  <div class="login-tabs">
    <div class="login-tab active" onclick="showForm('user')">
      <i class="bi bi-person me-1"></i>用户登录
    </div>
    <div class="login-tab" onclick="showForm('admin')">
      <i class="bi bi-shield-lock me-1"></i>管理员登录
    </div>
  </div>

  <!-- 用户登录表单 -->
  <!-- 修改：action路径从 /login/user 改为 /auth/login/user -->
  <form th:action="@{/auth/login/user}" method="post" class="login-form active" id="userForm">
    <div class="mb-3">
      <label for="username" class="form-label">用户名</label>
      <div class="input-group">
        <span class="input-group-text bg-transparent border-end-0">
          <i class="bi bi-person text-muted"></i>
        </span>
        <input type="text" class="form-control border-start-0" id="username" name="username" required
               placeholder="请输入用户名">
      </div>
    </div>
    <div class="mb-3">
      <label for="password" class="form-label">密码</label>
      <div class="input-group">
        <span class="input-group-text bg-transparent border-end-0">
          <i class="bi bi-lock text-muted"></i>
        </span>
        <input type="password" class="form-control border-start-0" id="password" name="password" required
               placeholder="请输入密码">
      </div>
    </div>
    <button type="submit" class="btn btn-primary w-100">
      <i class="bi bi-box-arrow-in-right me-2"></i>登录
    </button>
  </form>

  <!-- 管理员登录表单 -->
  <!-- 修改：action路径从 /login/admin 改为 /auth/login/admin -->
  <form th:action="@{/auth/login/admin}" method="post" class="login-form" id="adminForm">
    <div class="mb-3">
      <label for="adminUsername" class="form-label">管理员账号</label>
      <div class="input-group">
        <span class="input-group-text bg-transparent border-end-0">
          <i class="bi bi-person-badge text-muted"></i>
        </span>
        <input type="text" class="form-control border-start-0" id="adminUsername" name="username" required
               placeholder="请输入管理员账号">
      </div>
    </div>
    <div class="mb-3">
      <label for="adminPassword" class="form-label">密码</label>
      <div class="input-group">
        <span class="input-group-text bg-transparent border-end-0">
          <i class="bi bi-shield-lock text-muted"></i>
        </span>
        <input type="password" class="form-control border-start-0" id="adminPassword" name="password" required
               placeholder="请输入密码">
      </div>
    </div>
    <button type="submit" class="btn btn-warning w-100">
      <i class="bi bi-shield-check me-2"></i>管理员登录
    </button>
  </form>

  <!-- 注册链接 -->
  <div class="register-link">
    <small class="text-muted">还没有账户？</small>
    <a th:href="@{/auth/register}" class="text-decoration-none ms-1">立即注册</a>
  </div>

  <div class="admin-note">
    <small>默认管理员账号: xunan / 040523</small>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
  function showForm(type) {
    // 更新选项卡激活状态
    document.querySelectorAll('.login-tab').forEach(tab => {
      tab.classList.remove('active');
    });
    document.querySelector(`.login-tab:nth-child(${type === 'user' ? 1 : 2})`).classList.add('active');

    // 显示对应的表单
    document.getElementById('userForm').classList.remove('active');
    document.getElementById('adminForm').classList.remove('active');
    document.getElementById(type + 'Form').classList.add('active');
  }

  // 页面加载时检查是否有错误信息，如果有则显示对应的表单
  document.addEventListener('DOMContentLoaded', function() {
    const urlParams = new URLSearchParams(window.location.search);
    const error = urlParams.get('error');

    // 如果有错误信息，根据错误类型显示对应的表单
    if (error) {
      if (error.includes('管理员')) {
        showForm('admin');
      } else {
        showForm('user');
      }
    }

    // 初始化主题
    initTheme();

    // 添加主题切换事件监听
    document.getElementById('themeToggle').addEventListener('click', toggleTheme);
  });

  // 初始化主题
  function initTheme() {
    const savedTheme = localStorage.getItem('theme') || 'light';
    setTheme(savedTheme);
  }

  // 设置主题
  function setTheme(theme) {
    const themeIcon = document.getElementById('themeIcon');

    if (theme === 'dark') {
      document.body.classList.add('dark-theme');
      themeIcon.className = 'bi bi-moon-stars';
      themeIcon.parentElement.title = '切换到浅色主题';
    } else {
      document.body.classList.remove('dark-theme');
      themeIcon.className = 'bi bi-sun';
      themeIcon.parentElement.title = '切换到深色主题';
    }

    localStorage.setItem('theme', theme);
  }

  // 切换主题
  function toggleTheme() {
    const currentTheme = localStorage.getItem('theme') || 'light';
    const newTheme = currentTheme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
  }
</script>
</body>
</html>